<template>
  <div>
    <div class="d" :style="[style, bgstyle]">块元素</div>
    <input type="radio" v-model="fontsize" value="16" />16px字体
    <input type="radio" v-model="fontsize" value="18" />18px字体
    <input type="radio" v-model="fontsize" value="20" />20px字体
    <br />
    <input type="radio" v-model="bgcolor" value="blue" />蓝色
    <input type="radio" v-model="bgcolor" value="red" />红色
    <input type="radio" v-model="bgcolor" value="black" />黑色
    <div :class="{ d: true, ...cls }"></div>
    <p>plusOne: {{ plusOne }}</p>
    <button @click="setPlusOne">setPlusOne</button>
  </div>
</template>

<script>
import { reactive, ref, computed } from "vue";
export default {
  name: "Vue3Course03Computed",
  setup() {
    const fontsize = ref("20");
    const bgcolor = ref("red");
    const show = ref(true);
    // computed()：参数如果是一个函数，默认就是get方法，取值。返回值是一个计算属性。
    const style = computed(() => {
      return {
        fontSize: fontsize.value + "px",
      };
    });

    const bgstyle = computed(() => {
      return {
        backgroundColor: bgcolor.value,
      };
    });

    const cls = computed(() => {
      return {
        active: show.value ? true : false,
      };
    });

    /**
     * vue2 的计算属性写法: 两种：1.只取值 2.赋值取值
     * computed: {
     *   fullname() {
     *      return this.firstname + this.lastname;
     *   },
     *   fullname: {
     *     get() {},
     *     set(val) {}
     *   }
     * }
     */

    // computed()：参数如果是一个对象，就是支持set/get方法。返回值是一个计算属性。
    const count = ref(1);
    const plusOne = computed({
      get: () => {
        console.log("取值");
        return count.value + 10;
      },
      set: val => {
        console.log("赋值");
        count.value = val;
      },
    });
    const setPlusOne = () => {
      plusOne.value = 1000;
    };

    return {
      fontsize,
      style,
      bgcolor,
      bgstyle,
      cls,
      plusOne,
      setPlusOne,
    };
  },
};
</script>

<style lang="less" scoped>
.d {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}
.active {
  border: 5px solid red;
}
</style>
